import QtQuick
import "qrc:/usv_bridge/UI/compass/"

Rectangle{
    id: propulsion
    color:"#F7F7F7"
    width: parent.width
    height: parent.height
    anchors{
        horizontalCenter: parent.horizontalCenter
    }
    radius: 5
    // 能绘制进度条的推进器component 在图片背景上建立canvas 绘制线
    //第一行
    Text{
        id: propulsion_title
        text: qsTr("推进信息")
        font.family: ("Noto Sans")
        font.pixelSize: 16
        color: "#0070D6"
        anchors{
            top: parent.top
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
    }

    Image{
        id: icon
        source:"qrc:/usv_bridge/UI/compass/propulsion-0.png"
        anchors{
            top:propulsion_title.bottom
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
    }
    Rectangle{
        id: thrust_info
        anchors{
            left: parent.left
            leftMargin: 24
            right: parent.right
            top: icon.bottom
            topMargin: 10
            bottom: parent.bottom
        }
        color: "#00000000"

        Column{

            spacing: 12
            Rectangle{
                id: first_thrust
                width: propulsion.width
                height: 48
                color: "#00000000"
                Text{
                    id: left_up_text
                    text: qsTr("OFF")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                    }
                }
                Text{
                    id: left_down_text
                    text: qsTr("PWR %")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: left_up_text.bottom
                        topMargin: 5
                        right: left_up_text.right
                    }
                }

                Image{
                    anchors{
                        left: left_up_text.right
                        leftMargin: 67
                        verticalCenter: parent.verticalCenter
                    }

                    source: "qrc:/usv_bridge/UI/compass/thruster-element.png"
                }

            }

            Rectangle{
                id: second_thrust
                width: propulsion.width
                height: 48
                color: "#00000000"
                Text{
                    id: second_left_up_text
                    text: qsTr("OFF")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                    }
                }
                Text{
                    id: second_left_down_text
                    text: qsTr("PWR %")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: second_left_up_text.bottom
                        topMargin: 5
                        right: second_left_up_text.right
                    }
                }

                Image{
                    anchors{
                        left: second_left_up_text.right
                        leftMargin: 67
                        verticalCenter: parent.verticalCenter
                    }

                    source: "qrc:/usv_bridge/UI/compass/thruster-element.png"
                }
            }

            Rectangle{
                id: third_thrust
                width: propulsion.width
                height: 48
                color: "#00000000"
                Text{
                    id: third_left_up_text
                    text: qsTr("OFF")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                    }
                }
                Text{
                    id: third_left_down_text
                    text: qsTr("PWR %")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: third_left_up_text.bottom
                        topMargin: 5
                        right: third_left_up_text.right
                    }
                }

                Image{
                    id: third_icon
                    anchors{
                        left: third_left_up_text.right
                        leftMargin: 63
                        verticalCenter: parent.verticalCenter
                    }
                    source: "qrc:/usv_bridge/UI/compass/thruster-component.png"
                }

                Text{
                    id: third_right_up_text
                    text: qsTr("000"+"°")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: third_icon.right
                        leftMargin: 55
                    }
                }
                Text{
                    id: third_right_down_text
                    text: qsTr("Angle")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: third_right_up_text.bottom
                        topMargin: 5
                        left: third_right_up_text.left
                    }
                }
            }

            Rectangle{
                id: fourth_thrust
                width: propulsion.width
                height: 48
                color: "#00000000"
                //上方数值占位
                Text{
                    id: fourth_left_up_text
                    text: qsTr("0")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                    }
                }
                //上方数值
                Text{
                    id: fourth_left_up_text_2
                    text: qsTr("72")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fourth_left_up_text.top
                        // topMargin: 10
                        left: fourth_left_up_text.right
                        // leftMargin: 10
                    }
                }
                // 下方单位
                Text{
                    id: fourth_left_down_text
                    text: qsTr("PWR %")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: "#666666"
                    anchors{
                        top: fourth_left_up_text_2.bottom
                        topMargin: 5
                        right: fourth_left_up_text_2.right
                    }
                }

                //纵向推进器
                Rectangle{
                    id: thrust_double
                    width: 48
                    height: 48
                    color: "#00000000"
                    anchors{
                        left: fourth_left_down_text.right
                        leftMargin: 40
                    }

                    ThrustColumnSlider{
                        id: thrust_left_slider
                        anchors{
                            fill:parent
                        }
                    }
                }
                Rectangle{
                    id: thrust_double_second
                    width: 48
                    height: 48
                    color: "#00000000"
                    anchors{
                        left: thrust_double.right
                        // leftMargin: 10
                    }

                    ThrustColumnSlider{
                        id: thrust_right_slider
                        anchors{
                            fill:parent
                        }
                    }
                }

                //上方数值占位
                Text{
                    id: fourth_right_up_text
                    text: qsTr("0")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: thrust_double_second.right
                        leftMargin: 30
                    }
                }
                //上方数值
                Text{
                    id: fourth_right_up_text_2
                    text: qsTr("72")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fourth_right_up_text.top
                        // topMargin: 10
                        left: fourth_right_up_text.right
                        // leftMargin: 10
                    }
                }
                // 下方单位
                Text{
                    id: fourth_right_down_text
                    text: qsTr("PWR %")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: "#666666"
                    anchors{
                        top: fourth_right_up_text_2.bottom
                        topMargin: 5
                        left: fourth_right_up_text.left
                    }
                }

            }

            Rectangle{
                id: fifth_thrust
                width: propulsion.width
                height: 48
                color: "#00000000"
                Text{
                    id: fifth_left_up_text
                    text: qsTr("0")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                    }
                }
                Text{
                    id: fifth_left_up_text_2
                    text: qsTr("12")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fifth_left_up_text.top
                        // topMargin: 10
                        left: fifth_left_up_text.right
                        // leftMargin: 10
                    }
                }
                Text{
                    id: fifth_left_up_text_3
                    text: qsTr("°")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fifth_left_up_text_2.top
                        // topMargin: 10
                        left: fifth_left_up_text_2.right
                        // leftMargin: 10
                    }
                }
                Text{
                    id: fifth_left_down_text
                    text: qsTr("Angle")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: "#666666"
                    anchors{
                        top: fifth_left_up_text_2.bottom
                        topMargin: 5
                        right: fifth_left_up_text_2.right
                    }
                }

                //舵图left
                Rectangle{
                    id: left_rect
                    width:48
                    height: 32
                    color:"#00000000"
                    anchors{
                        left: fifth_left_down_text.right
                        leftMargin: 40
                    }

                    ArcRudderSlider{
                        id: left_rudder
                    }
                }

                //舵图right
                Rectangle{
                    id: right_rect
                    width:48
                    height: 32
                    color:"#00000000"
                    anchors{
                        left:left_rect.right
                        // leftMargin:10
                    }

                    ArcRudderSlider{
                        id: right_rudder
                    }
                }

                //right text
                Text{
                    id: fifth_right_up_text
                    text: qsTr("0")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: Qt.rgba(0, 0, 0, 0.2)
                    anchors{
                        top: parent.top
                        topMargin: 10
                        left: right_rect.right
                        leftMargin: 30
                    }
                }
                Text{
                    id: fifth_right_up_text_2
                    text: qsTr("12")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fifth_right_up_text.top
                        // topMargin: 10
                        left: fifth_right_up_text.right
                        // leftMargin: 10
                    }
                }
                Text{
                    id: fifth_right_up_text_3
                    text: qsTr("°")
                    font.family: ("Noto Sans")
                    font.pixelSize: 16
                    color: "#325B9A"
                    anchors{
                        top: fifth_right_up_text_2.top
                        // topMargin: 10
                        left: fifth_right_up_text_2.right
                        // leftMargin: 10
                    }
                }
                Text{
                    id: fifth_right_down_text
                    text: qsTr("Angle")
                    font.family: ("Noto Sans")
                    font.pixelSize: 12
                    color: "#666666"
                    anchors{
                        top: fifth_left_up_text_2.bottom
                        topMargin: 5
                        left: fifth_right_up_text.left
                    }
                }
            }

        }
    }


}
